<template>
  <div class="box">
    <Loading v-if="!fashionDetail.tideway_type" />
    <div v-else>
      <!-- 1.头部导航条 -->
      <van-sticky>
        <van-nav-bar
          left-arrow
          @click-left="$router.go(-1)"
        >
        </van-nav-bar>
      </van-sticky>
      <!-- 2.详情区域 -->
      <div class="detail">
        <!-- 2.1 标题 -->
        <h1>{{this.fashionDetail.tideway_title}}</h1>
        <!-- 2.2 用户头像及昵称、事件 -->
        <div class="userInfo">
          <img :src="this.fashionDetail.blogger_pic" alt=""/>
          <div class="info">
            <span>{{this.fashionDetail.blogger_nickname}}</span>
            <p>{{this.fashionDetail.blogger_time}}</p>
          </div>
        </div>
        <!-- 2.3详情内容 -->
        <ul class="detail_content">
          <li>
            <p>{{this.fashionDetail.detail_text1}}</p>
            <img :src="this.fashionDetail.detail_pic1" alt=""/>
          </li>
          <li>
            <p>{{this.fashionDetail.detail_text2}}</p>
            <img :src="this.fashionDetail.detail_pic2" alt=""/>
          </li>
          <li>
            <p>{{this.fashionDetail.detail_text3}}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Loading from '../../components/loading'
import { tidewayListProDetail } from '@/api'
import { NavBar, Sticky, Icon } from 'vant'
Vue.use(NavBar)
Vue.use(Sticky)
Vue.use(Icon)
export default {
  data () {
    return {
      fashionDetail: [] // 潮流详情
    }
  },
  components: {
    Loading
  },
  computed: {},
  mounted () {
    // 获取地址栏参数,根据tideway_id值获取对应潮流内容的详情
    const { tidewayid } = this.$route.params
    const faid = tidewayid.split('=')[1]
    // console.log(faid)
    tidewayListProDetail({ tideway_id: faid }).then(res => {
      this.fashionDetail = res.data.data[0]
    })
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
/deep/.van-nav-bar {
  height: .46rem;
  line-height: .46rem;
}
/deep/ .van-icon-arrow-left {
  font-size: 0.22rem;
  color: #464646;
}
/deep/ .van-hairline--bottom::after {
  border:none;
}
.detail {
  color: #464646;
  margin:.1rem .2rem .135rem;
  position: relative;
  h1 {
    // position: absolute;
    // left:.2rem;
    // right:.24rem;
    // color: #464646;
    font-size:.15rem;
    line-height: .2rem;
  }
  .userInfo {
    position: relative;
    margin:.095rem 0 .155rem;
    img {
      width: .37rem;
      height: .37rem;
      border-radius: 50%;
    }
    .info {
      display: inline;
      position: absolute;
      left:.475rem;
      line-height: .2rem;
      span {
         display: inline-block;
         -webkit-transform-origin-x: 0;
         -webkit-transform: scale(0.75);
      }
      p {
         -webkit-transform-origin-x: 0;
         -webkit-transform: scale(0.67);
      }
    }
  }
  .detail_content {
    li {
      p {
        text-indent: 2em;
        line-height: .19rem;
      }
      img {
        width: 3.35rem;
        height: 2rem;
        margin:.1rem 0;
      }
    }
  }
}
</style>
